<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2a8c552d4d6a06809892d007faeddedf.jpg?w=2452&h=920" alt="">
            </div>
            <div class="swiper-slide swiper-slide2">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
            </div>
            <div class="swiper-slide swiper-slide3">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7527aaa1011a9032ce94d7e1dfe953c.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
            </div>
        </div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <SiteCatogary></SiteCatogary>
    </div>
</template>

<script>
import $ from '../utils/jq-3.6.0.min.js';
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'
import SiteCatogary from './SiteCatogary';

$(function() {
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true, // 循环模式选项 当播放到最后一张图片后，点击按钮是否会继续轮播
        speed: 800, // 滚动一张或者切换一张图片，需要的时间，单位ms，默认300ms
        // grabCursor: true, // 鼠标停放在图片上，会显示小手图标。鼠标移动时会显示抓手图标。默认false
        
        // 如果需要分页器 即轮播图下面的小圆点
        pagination: {
            el: '.swiper-pagination',
            clickable: true, // 点击小圆点，也可以滚动轮播图
            bulletClass: 'dot', // 给小圆点添加新的类名，用于改变小圆点样式
            bulletActiveClass: 'active',
        },
        
        // 如果需要前进后退按钮
        navigation: {
            prevEl: '.swiper-button-prev', // 左按钮
            nextEl: '.swiper-button-next', // 右按钮
        },
        effect: 'fade', // 轮播的图片不是滑动，而是改为淡入淡出效果
        autoplay: {
            delay: 3000, // 自动播放的间隔时间，单位ms，默认3000ms
            stopOnLastSlide: false,
            disableOnInteraction: false, // 用户操作后是否停止自动播放，默认为true，即停止。改为false，表示不会停止自动播放
        }
    })
})

export default {
    name: 'Carousel',
    components: {SiteCatogary}
}
</script>

<style lang="less">
.swiper-container {
    position: relative;
    width: 100%;
    height: 460px;
    cursor: pointer;

    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        .swiper-slide {
            img {
                width: 1226px;
                height: 460px;
            }
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        position: absolute;
        z-index: 2;
        width: 41px;
        height: 69px;
        top: 50%;
        transform: translateY(-50%);
        background: url('https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png') no-repeat;
    }

    .swiper-button-prev {
        left: 234px;
        background-position: -85px 0;

        &:hover {
            background-position: 0 0;
        }

        &::after {
            content: "";
        }
    }

    .swiper-button-next {
        right: 0;
        background-position: -125px 0;

        &:hover {
            background-position: -41px 0;
        }

        &::after {
            content: "";
        }
    }

    .swiper-pagination {
        bottom: 20px;
        right: 30px;
        min-width: 60px;
        left: unset;
        width: unset;

        .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 2px solid #fff;
            border-color: hsla(0, 0%, 100%, .3);
            background-color: rgba(0, 0, 0, .4);
            border-radius: 50%;
            margin: 0 4px;

            &.active {
                background-color: hsla(0, 0%, 100%, .4);
                border-color: rgba(0, 0, 0, .4);
            }
        }
    }
}
</style>